var sensorVue = new Vue({
    el:'#sensorVue',
    data:{
        comList:[], //串口list
        baudrateList:[]//波特率
        ,localIPList:[] //本机iplist
        ,comName:"-1",
         baudrateName:""
        ,IPName:"-1"
        ,serverPort:6000 //服务默认的端口
        ,comConnect:false
        ,ipConnect:false
        ,clientName:""
        ,clientIndex:0
        ,clientListHeight:0
        ,clientList:[]
        ,clientListLen:0
        ,dataDivHeight1:10
        ,dataDivHeight:0
        ,socket:null,
        myChart:{},
        myChart1:{},
        wdOption :{
        	    tooltip : {
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    toolbox: {
        	        feature: {
        	            restore: {},
        	            saveAsImage: {}
        	        }
        	    },
        	    series: [
        	        {
        	            name: '业务指标',
        	            type: 'gauge',
        	            detail: {show: true,				// 是否显示详情,默认 true。
        	            	offsetCenter: [0,"65%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
        	            	color: "auto",			// 文字的颜色,默认 auto。
        	            	fontSize: 25,			// 文字的字体大小,默认 15。
        	            	formatter: "{value}℃",	// 格式化函数或者字符串
        	            },
        	            data: []
        	        },
        	       

        	    ]
        },
        sdOption :{
    	    tooltip : {
    	        formatter: "{a} <br/>{b} : {c}%"
    	    },
    	    toolbox: {
    	        feature: {
    	            restore: {},
    	            saveAsImage: {}
    	        }
    	    },
    	    series: [
    	        {
    	            name: '业务指标',
    	            type: 'gauge',
    	            detail: {show: true,				// 是否显示详情,默认 true。
    	            	offsetCenter: [0,"65%"],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
    	            	color: "auto",			// 文字的颜色,默认 auto。
    	            	fontSize: 25,			// 文字的字体大小,默认 15。
    	            	formatter: "{value}%RH",	// 格式化函数或者字符串
    	            },
    	            data: []
    	        },
    	       

    	    ]
    },
    timer:0
    },
    mounted:function () {
      var _this = this;
      if(this.timer){      
          clearInterval(this.timer)    
      }else{      
          this.timer = setInterval(()=>{       
           // 调用相应的接口，渲染数据        
          console.log('执行查询天气数据') 
          _this.getWeatherData();
          },30000)    
      }
      _this.getCom();
      var that=this;
      _this.myChart = echarts.init(document.getElementById('record'));
      _this.myChart1 = echarts.init(document.getElementById('record2'));
      _this.initEchart();
//      _this.getServerIp();
    },
    methods: {
    	getWeatherData:function(){
    		const param = {
    				msg:"FF030001000DC011"
                }
            
			$.ajax({
				type: "POST",
				url: baseURL + "sendmsg1",
				contentType: "application/json",
				data: JSON.stringify(param),
				success: function (r) {
					
				}
			});
            
    	},
    	initEchart:function(){
    		/*var that = this;
    		that.wdOption.series[0].data=[{value: 50, name: '温度'}];
//            that.wdOption.legend.data=r.date.list;
            that.myChart.setOption( that.wdOption);*/
    		
    	},
        //获取本机com口
        getCom: function (event) {
            var _this = this;
            $.get("/sensor/sensor/commList", function(r){
            	console.log(r.paramMap)
                _this.comList = r.paramMap.commList;
            	_this.baudrateList = r.paramMap.baudrateList;
                console.log("串口接口返回数据：",r.comList)
            });
        },
        connectCom:function (type) {
            var _this = this;
            if(type){
                if(_this.comName == "-1"){
                    layer.msg("请选择串口")
                    return;
                }
                // var confirm = layer.confirm("确认使用"+_this.comName+"进行连接？",{btn:["确定","取消"],title:"连接"},function () {
                    const param = {
                        isOpen:type,
                        commName:_this.comName,
                        bps:_this.baudrateName
                    }
                    $.post("/sensor/sensor/openSerialPort",param,function (data, textStatus, jqXHR) {
                    	console.log(data)
                        if(data.code == 0){//串口连接成功
                            // layer.close(confirm)
                            layer.msg(data.msg)
                            _this.comConnect = true;
                            _this.patrolStart();
                            return;
                        }else{
                            layer.msg("串口连接失败")
                            return;
                        }
                    })
                // })
            }else{
                const param = {
                    isOpen:type,
                    comName:_this.comName
                }
                $.post("/sensor/sensor/closeSerialPort",param,function (data) {
                    console.log(data)
                    if(data.code == 0){//串口关闭成功
                        layer.msg(data.msg)
                        _this.comConnect = false;
                        _this.socket.close();//对应的socket关闭
                        return;
                    }
                })
            }
        },
        patrolStart:function () {
        	//巡检开始
            var _this = this;
            _this.initWebsocket();//连接socket进行返回数据

        },
        patrolStop:function () {
            //巡检关闭
            var _this = this;
            $.get("/rxtx/stopEPC",function (msg) {
                var isStop = msg.isStop;
                if(isStop){
                    _this.socket.close();//对应的socket关闭
                    layer.msg("巡检已经关闭")
                    return;
                }
            })
        }
        ,initWebsocket:function () {
            var _this = this;
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else{
                console.log("您的浏览器支持WebSocket");

                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
                // socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
                // _this.socket = new WebSocket("/websocket/1".replace("http","ws"));
                if(_this.socket){//如果socket开启，则不进行再次开启
                    return;
                }
                _this.socket = new WebSocket("ws://localhost:9998/websocket/7");
                //打开事件
                _this.socket.onopen = function() {
                    console.log("Socket 已打开");
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                _this.socket.onmessage = function(msg) {
                    console.log(msg.data);
                    $("#contentDiv").append("<p>"+msg.data+"</p>")
                    console.log(JSON.parse(msg.data));
                    var data = JSON.parse(msg.data);
                    if(msg.data!=null && msg.data!=undefined && data.wd!=null && data.sd!=undefined){
                    	_this.wdOption.series[0].data=[{value: data.wd, name: '温度'}];
                    	_this.myChart.setOption( _this.wdOption);
                    	_this.sdOption.series[0].data=[{value: data.sd, name: '湿度'}];
                    	_this.myChart1.setOption( _this.sdOption);
                    }
                    
                    
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                _this.socket.onclose = function() {
                    console.log("Socket已关闭");
                };
                //发生了错误事件
                _this.socket.onerror = function() {
                    alert("Socket发生了错误");
                    //此时可以尝试刷新页面
                }
            }
        }
    },
    openSocket:function (){
    	//巡检开始
        var _this = this;
        _this.initWebsocket();//连接socket进行返回数据
    },
    destroyed:function () { //离开页面时，关闭socket
        console.log("离开页面时，关闭socket")
        alert("离开页面时，关闭socket")
        var _this = this;
        _this.connectIp(false);
        connectCom(false)
        if(_this.socket){
            layer.msg("bbbbbbbbbbbb")
            _this.socket.close();
        }
    }
});